<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>模拟select</title>
    <style>
      section{
          width: 500px;
          margin: 0 auto;
      }
      div{
          float: left;
          cursor: pointer;
      }
      .text{
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: lightskyblue;
      }
      .contentA{
          width: 152px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: lightgray;
      }
      ul{
          display: block;
          list-style: none;
          border: 1px solid grey;
          width: 150px;
          margin-left: 100px;
          
          padding-left: 0;
      }
      ul li{
          line-height: 40px;
          border-bottom: 1px dotted gray;
          text-align: center;
          cursor: pointer;
      }
      .hide{
          /*隐藏时候 位置依然保留*/
          visibility: hidden;
      }
    </style>
</head>
<body>
    <section>
        <div class="text">选择项目:</div>
        <div class="contentA">未选择</div>
        <p style="clear: both"></p>
        <ul class="hide">
            <li>html5</li>
            <li>css3</li>
            <li>JavaScript</li>
            <li>jQuery</li>
        </ul>
    </section>
</body>
</html>
<script>
    //  找到类名为contentA的div当鼠标移动到上方时
    //  移除section中ul的 hide类名
    $('.contentA').mouseover(function(){
        $('section ul').removeClass('hide');
    });
    // 找到 li标签 设置鼠标进入 和离开的 背景颜色
    $('section li').hover(function(){
        // alert('111');
        $(this).css('background-color','lightgray');
    },function(){
        $(this).css('background-color','white');
    });
    // 点击li标签 设置 div标签内容 同时隐藏ul
    $('section li').click(function(){
        $('.contentA').text($(this).text());
        $('section ul').addClass('hide');
    });

</script>